<template>
  <div class="secondary">
    <!-- 二级代理商户 -->
    <div class="query">
      <div class="queryBtn">
        <el-button
          size="mini"
          type="primary"
          style="padding: 8px 20px;margin-left: 10px;border: none;color: #626366;background-color: #f1f1f1"
          @click="handleAdvancedQuery"
        >
          <i class="iconshalou"></i>高级查询
        </el-button>
      </div>
      <div class="search">
        <el-input size="small" class="searchInput" placeholder="输入商户ID、名称、手机、推荐人" clearable></el-input>
        <el-button
          size="small"
          style="border: none;color: #626366;background-color: #f1f1f1"
          @click="handleSearch"
        >搜索</el-button>
      </div>
    </div>
    <!-- 表格内容 -->
    <el-table
      :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
      class="fromContent"
    >
      <!-- 多选框项 -->
      <el-table-column type="selection" align="center" width="40"></el-table-column>
      <el-table-column width="50px" align="center" type="index" label="序号"></el-table-column>
      <el-table-column align="center" prop="shopID" label="店铺ID">
        <!-- scope.row 当前项的数据 -->
        <template slot-scope="scope">
          <div>
            <span>{{ scope.row.shopID }}</span>
            <span
              class="dec"
              :class="scope.row.isStudios === '分' ? 'fendian' : ''"
            >{{scope.row.isStudios}}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="shoptName" label="店铺名称"></el-table-column>
      <el-table-column align="center" prop="merchantName" label="商户姓名"></el-table-column>
      <el-table-column align="center" prop="businessPhone" label="商户手机"></el-table-column>
      <el-table-column align="center" prop="business" label="行业"></el-table-column>
      <el-table-column align="center" prop="version" label="所选版本"></el-table-column>
      <el-table-column align="center" prop="registTime" width="160" label="注册时间"></el-table-column>
      <!-- :formatter="dateFormat" -->
      <el-table-column align="center" prop="expireTime" width="160" label="到期时间"></el-table-column>
      <!-- :formatter="dateFormat" -->
      <el-table-column align="center" prop="lastlogintime" width="160" label="最后登录时间"></el-table-column>
      <!-- :formatter="dateFormat" -->
      <el-table-column align="center" prop="referrer" label="推荐人"></el-table-column>
    </el-table>
    <!-- 这个是分页器 -->
    <Pagination :total="total"></Pagination>
  </div>
</template>

<script>
import Pagination from "../../components/Pagination";
export default {
  data() {
    return {
      // 表格数据
      tableData: [],
      search: "",
      // 响应筛选展开与否
      isShow: true,
      // 服务提示
      isTip: false,
      // 分页器的数据
      total: 0
    };
  },
  components: {
    Pagination
  },
  methods: {
    // 跳转到增值服务
    handleEdit() {
      this.$router.push("addedServices");
    },
    // 禁用
    handleDelete(index, row) {
      console.log(index, row);
    },
    // 搜索功能
    handleSearch() {
      console.log("进行搜索");
    },
    // 高级查询
    handleAdvancedQuery() {
      this.isShow = !this.isShow;
    },
    // 跳转到新增商户
    handleToAddUser() {
      this.$router.push("addUser");
    },
    //时间格式化
    dateFormat: function(row, column) {
      var date = row[column.property];
      if (date == undefined) {
        return "";
      }
      return this.$moment(date).format("YYYY-MM-DD HH:mm:ss");
    }
  }
};
</script>

<style lang="less" scoped>
@deep: ~">>>";
.secondary {
  background-color: #fff;
  padding: 20px;
  // 搜索部分的样式
  .query {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    .search {
      display: flex;
      .searchInput {
        width: 250px;
        margin-right: 10px;
      }
    }
  }
  // 修改筛选按钮的hover效果
  .query @{deep} .el-button:focus,
  .el-button:hover {
    background-color: #f1f1f1;
  }
  // 表格的样式
  .fromContent {
    margin: 0 auto 40px;
    .serviceIcon {
      cursor: pointer;
      font-size: 18px;
    }
    .tipInfo {
      position: absolute;
      top: 0;
      right: 70px;
    }
    // 总分店的样式
    .dec {
      background-color: #3399ff;
      color: #fff;
      padding: 3px 8px;
      margin-left: 10px;
      &.fendian {
        background-color: #ff6600;
        // 区分不同的模式颜色
        // &::before {
        //   border-right-color: #ff6600;
        // }
      }
      // &::before {
      //   display: block;
      //   content: "";
      //   // 画出三角形
      //   border-width: 6px;
      //   border-style: solid;
      //   // color:inherit
      //   border-color: transparent;
      //   border-right-color: #3399ff;
      //   /* 定位 */
      //   position: absolute;
      //   left: 83px;
      //   top: 20px;
      // }
    }
  }
  // 更改自带样式
  .fromContent @{deep} .serveBox.el-button {
    border: none;
    padding: 0;
    margin-right: 5px;
  }
  .fromContent @{deep} .el-button:hover {
    background-color: inherit;
  }
}
// 更改表头颜色
.secondary @{deep} .el-table th {
  background-color: #fafafa;
  color: #252525;
  font-weight: 100;
}
</style>